<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yeffect-test-case</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['hoverTabs'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
    <style>
        .HtabNavs {
            height: 35px;
            width: 303px;
            border: 1px solid #aaa;
            background: #eee;
            border-right: 0px;
            position: relative;
        }

        .HtabNavs a {
            display: block;
            height: 35px;
            line-height: 35px;
            width: 100px;
            border-right: 1px solid #aaa;
            float: left;
            text-align: center;
            color: #333;
        }

        .HtabNavs a.current {
            background: #fff;
            height: 36px;
        }

        .HtabContents {
            display: none;
            width: 302px;
            height: 100px;
            border: 1px solid #aaa;
            background: #fff;
            margin-top: -1px;
            font-size: 14px;
        }
    </style>
    <body>
        <div>
            <div class="HtabNavs">
                <a href="javascript:void(0)">item1</a>
                <a href="javascript:void(0)">item2</a>
                <a href="javascript:void(0)">item3</a>
            </div>
            <div class="HtabContents">
                content A
            </div>
            <div class="HtabContents">
                content B
            </div>
            <div class="HtabContents">
                content C
            </div>
        </div>
        <br>
        <div>
            <div class="HtabNavs">
                <a href="javascript:void(0)">itme1</a>
                <a href="javascript:void(0)">item2</a>
                <a href="javascript:void(0)">item3</a>
            </div>
            <div class="HtabContents">
                content A
            </div>
            <div class="HtabContents">
                content B
            </div>
            <div class="HtabContents">
                content C
            </div>
        </div>
    <script type="text/javascript">
        $(function(){
            Yeffect.hoverTabs(".HtabNavs a",".HtabContents","current");;
        })
    </script>
    </body>
</html>
